<template>
    <view class="gy-warpper">
        <view class="card">
            <view class="card-title">简介</view>
            <view class="card-body">
                美好生活的灵感从旅行钟施现人生的无数种可能。敝落在各个地门....一些关于旅行的文案看完就必动，旅行有痛，不去....
            </view>
        </view>

        <view class="card-list">
            <view class="card-item">
                <view class="item-wrapper" @click="toAgreement">
                    <img class="item-img" src="@/assets/images/icon_xieyi.png" alt="">
                    <view class="item-text">用户协议和隐私协议</view>
                </view>
                <view>
                    <img class="right" src="@/assets/images/cheveron-right.png" alt="">
                </view>
            </view>
            <view class="card-item">
                <view class="item-wrapper">
                    <img class="item-img" src="@/assets/images/icon_tixian.png" alt="">
                    <view class="item-text">充值协议</view>
                </view>
                <view>
                    <img class="right" src="@/assets/images/cheveron-right.png" alt="">
                </view>
            </view>
            <view class="card-item">
                <view class="item-wrapper">
                    <img class="item-img" src="@/assets/images/icon_zhengjian.png" alt="">
                    <view class="item-text">平台证件照信息</view>
                </view>
                <view>
                    <img class="right" src="@/assets/images/cheveron-right.png" alt="">
                </view>
            </view>
            <view class="card-item">
                <view class="item-wrapper">
                    <img class="item-img" src="@/assets/images/icon_youxiang.png" alt="">
                    <view class="item-text">官方邮箱</view>
                </view>
                <view>
                    <img class="right" src="@/assets/images/cheveron-right.png" alt="">
                </view>
            </view>

        </view>
    </view>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';

function toAgreement() {
    uni.navigateTo({ url: '/pages/agreement/index' })
}

</script>

<style lang="scss" scoped>
page {
    background: url('@/assets/images/home_bg.png') no-repeat #f8f8f8;
    background-size: cover;
    height: 100%;
    font-family: PingFang SC Bold;

}

.gy-warpper {
    padding: 0 30rpx;

    .card {
        background: #fff;
        border-radius: 20rpx;
        height: 230rpx;
        padding: 0 30rpx;
        padding-top: 48rpx;
        margin-top: 48rpx;


        .card-title {
            color: #333333;
            font-size: 28rpx;
        }

        .card-body {
            color: #BCBCBC;
            margin-top: 18rpx;
        }
    }

    .card-list {
        border-radius: 20rpx;
        background: #fff;
        padding-left: 30rpx;
        padding-right: 14rpx;
        margin-top: 20rpx;

        .card-item {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .item-wrapper {
                display: flex;
                height: 116rpx;
                align-items: center;
            }

            border-bottom: 1px solid #eee;

            .item-img {
                width: 56rpx;
                height: 56rpx;
            }

            .right {
                width: 40rpx;
                height: 40rpx;
            }

            .item-text {
                color: #333333;
                font-size: 28rpx;
            }

            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
</style>